<!--
 * @Description: 通讯录首页
 * @Author: Lxc
 * @Date: 2021-09-09 14:56:43
 * @LastEditors: Lxc
 * @LastEditTime: 2021-09-13 17:41:11
-->
<template>
	<view class="content page-content">
		<SearchBar ref="searchBar" class="page-header" />
		<view class="contacts-mail-list">
			<view class="contacts-wrap">
				<view v-for="item of contactsList" :key="item.id" class="contacts-item" @click="linkToBook(item)">
					<view class="contacts-content">
						<image class="contacts-img" :src="item.img" alt=""/>
						<text class="contacts-label">{{ item.label }}</text>
					</view>
					<uni-icons type="arrowright" color="#707070"></uni-icons>
				</view>
			</view>
			<view class="contacts-wrap">
				<view v-for="(item, index) of mailList" :key="index" class="contacts-item" @click="linkToMail(item)">
					<view class="contacts-content">
						<image class="contacts-img" :src="item.img" alt=""/>
						<text class="contacts-label">{{ item.label }}</text>
					</view>
					<uni-icons type="arrowright" color="#707070"></uni-icons>
				</view>
			</view>
		</view>
		<!-- <TabBar :current="3"></TabBar> -->
	</view>
</template>

<script>
import SearchBar from '@/components/searchBar';
	export default {
		components: { SearchBar },
		data() {
			return {
				title: 'Hello',
				contactsList: [
					{
						id: 1,
						img: require('@/static/images/recently-contacts.png'),
						label: '最近联系人',
					},
					{
						id: 2,
						img: require('@/static/images/frequent-contacts.png'),
						label: '常用联系人',
					}
				],
				mailList: [
					{
						id: 1,
						img: require('@/static/images/government-book.png'),
						label: '政务通讯录'
					},
					{
						id: 2,
						img: require('@/static/images/internal-book.png'),
						label: '内部通讯录'
					},
					{
						id: 3,
						img: require('@/static/images/emergency-book.png'),
						label: '应急通讯录'
					}
				]
			}
		},
		onLoad() {
		},
		onShow() {
			// uni.hideTabBar({
			// 	animation: false
			// })
		},
		methods: {
			// 联系人
			linkToBook(data) {
				uni.navigateTo({
					url: '/pages/contactsBook/index?id=' + data.id
				})
			},
			// 通讯录
			linkToMail(data) {
				uni.navigateTo({
					url: '/pages/mailList/index?id=' + data.id
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
*{
	box-sizing: border-box;
}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.page-header {
		width: 100%;
	}

	.contacts-mail-list {
		width: 100%;
		height: 100%;
		padding: 40rpx 32rpx 24rpx;
	}

	.contacts-wrap {
		display: flex;
    flex-direction: column;
    justify-content: center;
		margin: 0 32rpx 24rpx;
		padding: 0 32rpx;
		border-radius: 16rpx;
		background: #fff;
		box-shadow: 0 3rpx 15rpx rgba(44, 121, 247, 0.2);
		&:nth-child(1) {
			.contacts-item {
				&:nth-child(1) {
					.contacts-img {
						width: 29.32rpx;
						height: 26.64rpx;
					}
				}
				&:nth-child(2) {
					.contacts-img {
						width: 27.19rpx;
						height: 29rpx;
					}
				}
			}
		}
		&:nth-child(2) {
			.contacts-item {
				&:nth-child(1) {
					.contacts-img {
						width: 28.94rpx;
						height: 26.53rpx;
					}
				}
				&:nth-child(2) {
					.contacts-img {
						width: 25.92rpx;
						height: 27rpx;
					}
				}
				&:nth-child(3) {
					.contacts-img {
						width: 29.9rpx;
						height: 30.04rpx;
					}
				}
			}
		}
	}

	.contacts-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #E4E7F0;
		&:last-child {
			border-bottom: 0;
		}
	}

	.contacts-label {
		padding-left: 32.68rpx;
		font-size: 30rpx;
		color: #2B2B2B;
	}
</style>
